<template>
    <div class="card">
                <div class="card-header">
                    <div class="from-group">
                        <label for="">要完成当前任务，需要哪些步骤？</label>
                        <input type="text" v-model="newStep" ref="newStep" @keyup.enter="addStep" class="form-control">
                    </div>
                </div>
            </div>
</template>
<script>
import { Message } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import { Hub } from '../event-bus'
export default {
    props:[
        'route'
    ],
    data(){
        return {
            newStep:''
        }
    },
    created(){
        Hub.$on('edit',this.edit)
    },
    methods:{
        
        addStep(){
            axios.post(this.route,{name:this.newStep}).then((res)=>{//添加数据
                this.$emit('add',res.data.step)//事件
                this.newStep=''
                // console.log(res)
                // this.steps.push(res.data.step)
                // this.newStep=''
            }).catch((err)=>{
                console.log(err)
                if(err.response.status===422){
                    Message.error(err.response.data.errors.name[0])
                }
                    
            })
        //    this.steps.push({name:this.newStep,completion:false})
        //    this.newStep=''
        },
        edit(step){
            this.newStep=step.name
            this.$refs.newStep.focus()
        }
    }
}
</script>

